<template>
	<view class="panel_content">
		<view class="content_top">
			<view class="content_top_pic">
				<image mode="aspectFill" :src="product.specs[specsIndex]['pics'][0]['url']"></image>
			</view>
			<view class="content_top_right">
				<view class="content_top_price"><text class="unit">¥</text><text class="money">{{formData["total"]}}</text></view>
				<view class="content_top_select">{{product.specs[specsIndex]["specs_str"]}}</view>
			</view>
		</view>						
		<view class="content_central">
			<view class="content_central_bar">请选择规格：</view>
			<view class="size_list">
				<view class="tag_item" v-for="(item, index) in product.specs" :key="index">
					<u-tag :name="index" :text="`${item.specs_str}`" :plain="!index==specsIndex" :borderColor="index==specsIndex?'rgb(250,44,25)':'rgb(245,245,245)'" :bgColor="index==specsIndex?'rgb(254,233,232)':'rgb(245,245,245)'" :color="index==specsIndex?'rgb(250,44,25)':'#333333'" 
						@click="radioClick(index)">
					</u-tag>
				</view>
			</view>
			
		</view>
		<view class="content_bottom">
			<view class="content_bottom_left">购买数量</view>
			<view class="content_bottom_right"><u-number-box v-model="amount" @change="valChange"></u-number-box></view>
		</view>
	</view>
</template>


<script>
	import {index} from './product-specs-select.js';
	export default {
		name: 'productSpecsSelect',
		mixins: [index]
	}
</script>

<style>
	@import 'product-specs-select.css';
</style>